<template>
	<view class="ionfo">
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" @click="back">
					<image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text>
				</view>
				<view class="fs-34">个人信息</view>
				<view class="backbtn"></view>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">用户基础信息</view>
			</view>
			<view class="text">
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">姓名</view>
						<view style="width: 300rpx;font-size: 32rpx;">{{ userinfo.real_name }}</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">证件类型</view>
						<view class="fc-888" style="width: 300rpx;font-size: 32rpx;">{{ userinfo.card_type }}</view>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">证件号码</view>
						<view class="fc-888 lett2" style="width: 300rpx;font-size: 32rpx;">{{ userinfo.card_id | code }}</view>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">纳税人识别号</view>
						<view class=" lett2" style="width: 300rpx;font-size: 32rpx;" v-if="islook==0">{{ userinfo.card_id_shibie | code }}</view>
						<view class=" lett2" style="width: 300rpx;font-size: 32rpx;" v-else>{{ userinfo.card_id_shibie }}</view>
					</view>
					<view class="look" @click="checkClick" v-if="islook==0">查看</view>
					<view class="look" @click="copy(userinfo.card_id_shibie)" v-else>复制</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">出生日期</view>
						<view style="width: 300rpx;font-size: 32rpx;">{{ userinfo.birthday | birthday }}</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">性别</view>
						<view style="width: 300rpx;font-size: 32rpx;">{{ userinfo.xingbie }}</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">国籍(地区)</view>
						<view style="width: 300rpx;font-size: 32rpx;" class="fc-888">{{ userinfo.guoji }}</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">户籍所在地</view>
			</view>
			<view class="text">
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">所在地区</view>
						<view v-if="userinfo.huji_qu" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.huji_qu }}</view>
						<view v-else class="fc-888" style="width: 340rpx;">请选择</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">详细地址</view>
						<view v-if="userinfo.huji_address" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.huji_address }}</view>
						<view v-else class="fc-888" style="width: 380rpx;">请填写小区、楼栋、单元室等</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">经常居住地</view>
			</view>
			<view class="text">
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">所在地区</view>
						<view v-if="userinfo.changju_qu" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.changju_qu }}</view>
						<view v-else class="fc-888" style="width: 340rpx;">请选择</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">详细地址</view>
						<view v-if="userinfo.changju_address" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.changju_address }}</view>
						<view v-else class="fc-888" style="width: 380rpx;">请填写小区、楼栋、单元室等</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">联系地址</view>
			</view>
			<view class="text">
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">所在地区</view>
						<view v-if="userinfo.lianxi_qu" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.lianxi_qu }}</view>
						<view v-else class="fc-888" style="width: 340rpx;">请选择</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">详细地址</view>
						<view v-if="userinfo.lianxi_address" style="width: 450rpx;font-size: 34rpx;">{{ userinfo.lianxi_address }}</view>
						<view v-else class="fc-888" style="width: 380rpx;">请填写小区、楼栋、单元室等</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="item acea-row row-middle">
				<view class="line"></view>
				<view class="bold">其他</view>
			</view>
			<view class="text">
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">学历</view>
						<view v-if="userinfo.xueli" style="font-size: 34rpx;">{{ userinfo.xueli }}</view>
						<view v-else class="fc-888" style="width: 340rpx;">请填写</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">民族</view>
						<view v-if="userinfo.mingzu" style="font-size: 34rpx;">{{ userinfo.mingzu }}</view>
						<view v-else class="fc-888" style="width: 340rpx;">请填写</view>
					</view>
					<view class="iconfont icon-xiangyou fc-888 fs-26"></view> 
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="acea-row">
						<view class="tc" style="width: 220rpx;">电子邮箱</view>
						<view v-if="userinfo.youxiang" style="font-size: 34rpx;">{{ userinfo.youxiang }}</view>
						<view v-else class="fc-888" style="width: 380rpx;">请填写</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit">保存</view>
		
		
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		filters:{
			code(str){
				console.log(typeof(str))
				let len = str.length-2;
				let xing = '';
				for(var i=0;i<len;i++) {
					xing+='*';
				}
				return str.substring(0,1)+xing+str.substring(str.length-1);
				// var reg = /^(\d{1})\d{16}(\d{1})$/;
				// return val.replace(reg, "$1***************$2");
			},
			birthday(val){
			  let date = new Date(val*1000)
			  let Y = date.getFullYear() + '-'
			  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
			  let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
			  let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			  let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
			  let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
			  return Y + M + D
			}
		},
		data() {
			return {
				userinfo:[],
			};
		},
		onShow() {
			this.islook = uni.getStorageSync('islook')
			this.UserInfo();
		},
		methods:{
			UserInfo(){
				 getUserInfo().then(res=>{
					this.userinfo = res.data;
				 })
			},
			copy(val){
				uni.setClipboardData({
					data: val,
					showToast: false,
					success: function () {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			checkClick(){
				uni.navigateTo({
					url:'/pages/index/phonecheck'
				})
			},
			back(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ionfo{
		
		.submit{
			width: 690rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #D1E7FC;
			color: #fff;
			margin: 50rpx auto;
			border-radius: 10rpx;
		}
		
		.tc{
			color: #5B5A60;
			font-size: 32rpx;
		}
		
		.content{
			width: 100%;
			margin-top: 30rpx;
			background-color: #ffffff;
			
			.text{
				padding-left: 30rpx;
				
				.item{
					padding: 30rpx 30rpx 30rpx 0;
					border-bottom: 1rpx solid #f2f2f2;
				}
				.look{
					color: #5186E6;
					font-size: 28rpx;
				}
			}
			
			.item{
				padding: 30rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.line{
					width: 10rpx;
					height: 30rpx;
					border-radius: 10rpx;
					background-color: #5186E6;
					margin-right: 10rpx;
				}
			}
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
	}

</style>
